
<template>
  <div class="asset-maintenance">
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <!-- 资产提醒事项维护 -->
      <el-tab-pane label="资产提醒事项维护" name="reminders">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>资产提醒事项</span>
              <el-button type="primary" @click="handleAddReminder">添加提醒</el-button>
            </div>
          </template>

          <!-- 搜索区域 -->
          <el-form :inline="true" :model="reminderSearchForm" class="search-form">
            <el-form-item label="资产名称">
              <el-input v-model="reminderSearchForm.assetName" placeholder="请输入资产名称" clearable />
            </el-form-item>
            <el-form-item label="提醒类型">
              <el-select v-model="reminderSearchForm.type" placeholder="请选择提醒类型" clearable>
                <el-option label="保养提醒" value="maintenance" />
                <el-option label="年检提醒" value="inspection" />
                <el-option label="折旧提醒" value="depreciation" />
                <el-option label="报废提醒" value="disposal" />
              </el-select>
            </el-form-item>
            <el-form-item label="提醒状态">
              <el-select v-model="reminderSearchForm.status" placeholder="请选择提醒状态" clearable>
                <el-option label="未提醒" value="pending" />
                <el-option label="已提醒" value="reminded" />
                <el-option label="已处理" value="handled" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleReminderSearch">查询</el-button>
              <el-button @click="resetReminderSearch">重置</el-button>
            </el-form-item>
          </el-form>

          <!-- 表格区域 -->
          <el-table :data="reminderTableData" border style="width: 100%">
            <el-table-column prop="assetName" label="资产名称" width="180" />
            <el-table-column prop="assetCode" label="资产编码" width="120" />
            <el-table-column prop="type" label="提醒类型" width="120">
              <template #default="scope">
                <el-tag :type="getReminderType(scope.row.type)">
                  {{ getReminderLabel(scope.row.type) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="remindDate" label="提醒日期" width="120" />
            <el-table-column prop="content" label="提醒内容" min-width="200" />
            <el-table-column prop="status" label="提醒状态" width="100">
              <template #default="scope">
                <el-tag :type="getReminderStatusType(scope.row.status)">
                  {{ getReminderStatusLabel(scope.row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createdBy" label="创建人" width="120" />
            <el-table-column label="操作" width="200" fixed="right">
              <template #default="scope">
                <el-button link type="primary" @click="handleViewReminder(scope.row)">查看</el-button>
                <el-button link type="primary" @click="handleEditReminder(scope.row)">编辑</el-button>
                <el-button link type="danger" @click="handleDeleteReminder(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页区域 -->
          <div class="pagination-container">
            <el-pagination
              v-model:current-page="reminderPagination.currentPage"
              v-model:page-size="reminderPagination.pageSize"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="reminderPagination.total"
              @size-change="handleReminderSizeChange"
              @current-change="handleReminderCurrentChange"
            />
          </div>
        </el-card>
      </el-tab-pane>

      <!-- 财务信息维护 -->
      <el-tab-pane label="财务信息维护" name="finance">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>财务信息批量导入</span>
              <el-button type="primary" @click="handleImport">导入财务数据</el-button>
            </div>
          </template>

          <!-- 搜索区域 -->
          <el-form :inline="true" :model="financeSearchForm" class="search-form">
            <el-form-item label="资产分类">
              <el-select v-model="financeSearchForm.category" placeholder="请选择资产分类" clearable>
                <el-option label="固定资产" value="fixed" />
                <el-option label="低值易耗品" value="low_value" />
                <el-option label="租赁资产" value="lease" />
                <el-option label="租入固定资产改良" value="lease_improvement" />
              </el-select>
            </el-form-item>
            <el-form-item label="更新日期">
              <el-date-picker
                v-model="financeSearchForm.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleFinanceSearch">查询</el-button>
              <el-button @click="resetFinanceSearch">重置</el-button>
            </el-form-item>
          </el-form>

          <!-- 表格区域 -->
          <el-table :data="financeTableData" border style="width: 100%">
            <el-table-column prop="assetCode" label="资产编码" width="120" />
            <el-table-column prop="assetName" label="资产名称" width="180" />
            <el-table-column prop="category" label="资产分类" width="120">
              <template #default="scope">
                <el-tag :type="getCategoryType(scope.row.category)">
                  {{ getCategoryLabel(scope.row.category) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="originalValue" label="原值" width="120">
              <template #default="scope">
                ¥{{ scope.row.originalValue.toLocaleString() }}
              </template>
            </el-table-column>
            <el-table-column prop="accumulatedDepreciation" label="累计折旧" width="120">
              <template #default="scope">
                ¥{{ scope.row.accumulatedDepreciation.toLocaleString() }}
              </template>
            </el-table-column>
            <el-table-column prop="netValue" label="净值" width="120">
              <template #default="scope">
                ¥{{ scope.row.netValue.toLocaleString() }}
              </template>
            </el-table-column>
            <el-table-column prop="updateDate" label="更新日期" width="120" />
            <el-table-column prop="updatedBy" label="更新人" width="120" />
            <el-table-column label="操作" width="150" fixed="right">
              <template #default="scope">
                <el-button link type="primary" @click="handleViewFinance(scope.row)">查看</el-button>
                <el-button link type="primary" @click="handleEditFinance(scope.row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页区域 -->
          <div class="pagination-container">
            <el-pagination
              v-model:current-page="financePagination.currentPage"
              v-model:page-size="financePagination.pageSize"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="financePagination.total"
              @size-change="handleFinanceSizeChange"
              @current-change="handleFinanceCurrentChange"
            />
          </div>
        </el-card>
      </el-tab-pane>
    </el-tabs>

    <!-- 添加/编辑提醒对话框 -->
    <el-dialog
      v-model="reminderDialogVisible"
      :title="reminderDialogTitle"
      width="600px"
    >
      <el-form
        ref="reminderFormRef"
        :model="reminderForm"
        :rules="reminderRules"
        label-width="100px"
      >
        <el-form-item label="资产" prop="assetId">
          <el-select v-model="reminderForm.assetId" placeholder="请选择资产" style="width: 100%">
            <el-option
              v-for="asset in assetOptions"
              :key="asset.id"
              :label="`${asset.name} (${asset.code})`"
              :value="asset.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="提醒类型" prop="type">
          <el-select v-model="reminderForm.type" placeholder="请选择提醒类型" style="width: 100%">
            <el-option label="保养提醒" value="maintenance" />
            <el-option label="年检提醒" value="inspection" />
            <el-option label="折旧提醒" value="depreciation" />
            <el-option label="报废提醒" value="disposal" />
          </el-select>
        </el-form-item>
        <el-form-item label="提醒日期" prop="remindDate">
          <el-date-picker
            v-model="reminderForm.remindDate"
            type="date"
            placeholder="请选择提醒日期"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="提醒内容" prop="content">
          <el-input
            v-model="reminderForm.content"
            type="textarea"
            :rows="4"
            placeholder="请输入提醒内容"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="reminderDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitReminderForm">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 导入财务数据对话框 -->
    <el-dialog
      v-model="importDialogVisible"
      title="导入财务数据"
      width="500px"
    >
      <el-upload
        class="upload-demo"
        drag
        action="#"
        :auto-upload="false"
        :on-change="handleFileChange"
        :file-list="importFileList"
        accept=".xlsx,.xls"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          将文件拖到此处，或<em>点击上传</em>
        </div>
        <template #tip>
          <div class="el-upload__tip">
            只能上传xlsx/xls文件，且不超过10MB
          </div>
        </template>
      </el-upload>
      <div class="import-template">
        <el-link type="primary" @click="downloadTemplate">下载导入模板</el-link>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="importDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitImport">确定导入</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'

// 当前激活的标签页
const activeTab = ref('reminders')

// 提醒事项相关
const reminderFormRef = ref()
const reminderDialogVisible = ref(false)
const reminderDialogTitle = ref('')
const reminderSearchForm = reactive({
  assetName: '',
  type: '',
  status: ''
})

const reminderTableData = ref([
  {
    id: 1,
    assetId: 1,
    assetName: '笔记本电脑',
    assetCode: 'ZC20230001',
    type: 'maintenance',
    remindDate: '2023-12-15',
    content: '笔记本电脑需要定期保养，清理灰尘，检查散热系统',
    status: 'pending',
    createdBy: '张三'
  },
  {
    id: 2,
    assetId: 2,
    assetName: '办公桌',
    assetCode: 'ZC20230002',
    type: 'inspection',
    remindDate: '2023-11-20',
    content: '办公桌年检提醒，检查结构稳固性',
    status: 'reminded',
    createdBy: '李四'
  }
])

const reminderPagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 50
})

const reminderForm = reactive({
  id: '',
  assetId: '',
  type: '',
  remindDate: '',
  content: ''
})

const reminderRules = reactive({
  assetId: [
    { required: true, message: '请选择资产', trigger: 'change' }
  ],
  type: [
    { required: true, message: '请选择提醒类型', trigger: 'change' }
  ],
  remindDate: [
    { required: true, message: '请选择提醒日期', trigger: 'change' }
  ],
  content: [
    { required: true, message: '请输入提醒内容', trigger: 'blur' }
  ]
})

// 财务信息相关
const financeSearchForm = reactive({
  category: '',
  dateRange: []
})

const financeTableData = ref([
  {
    id: 1,
    assetCode: 'ZC20230001',
    assetName: '笔记本电脑',
    category: 'fixed',
    originalValue: 8500,
    accumulatedDepreciation: 1700,
    netValue: 6800,
    updateDate: '2023-10-15',
    updatedBy: '财务部'
  },
  {
    id: 2,
    assetCode: 'ZC20230002',
    assetName: '办公桌',
    category: 'low_value',
    originalValue: 1200,
    accumulatedDepreciation: 600,
    netValue: 600,
    updateDate: '2023-10-15',
    updatedBy: '财务部'
  }
])

const financePagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 30
})

// 导入相关
const importDialogVisible = ref(false)
const importFileList = ref([])

// 资产选项
const assetOptions = ref([
  { id: 1, name: '笔记本电脑', code: 'ZC20230001' },
  { id: 2, name: '办公桌', code: 'ZC20230002' },
  { id: 3, name: '投影仪', code: 'ZC20230003' }
])

// 获取提醒类型标签
const getReminderLabel = (type) => {
  const typeMap = {
    maintenance: '保养提醒',
    inspection: '年检提醒',
    depreciation: '折旧提醒',
    disposal: '报废提醒'
  }
  return typeMap[type] || type
}

// 获取提醒类型样式
const getReminderType = (type) => {
  const typeMap = {
    maintenance: '',
    inspection: 'success',
    depreciation: 'warning',
    disposal: 'danger'
  }
  return typeMap[type] || ''
}

// 获取提醒状态标签
const getReminderStatusLabel = (status) => {
  const statusMap = {
    pending: '未提醒',
    reminded: '已提醒',
    handled: '已处理'
  }
  return statusMap[status] || status
}

// 获取提醒状态样式
const getReminderStatusType = (status) => {
  const typeMap = {
    pending: 'info',
    reminded: 'warning',
    handled: 'success'
  }
  return typeMap[status] || ''
}

// 获取资产分类标签
const getCategoryLabel = (category) => {
  const categoryMap = {
    fixed: '固定资产',
    low_value: '低值易耗品',
    lease: '租赁资产',
    lease_improvement: '租入固定资产改良'
  }
  return categoryMap[category] || category
}

// 获取资产分类样式
const getCategoryType = (category) => {
  const typeMap = {
    fixed: '',
    low_value: 'success',
    lease: 'warning',
    lease_improvement: 'info'
  }
  return typeMap[category] || ''
}

// 标签页切换
const handleTabClick = (tab) => {
  console.log('切换到标签页：', tab.props.name)
}

// 提醒事项相关方法
const handleAddReminder = () => {
  reminderDialogTitle.value = '添加提醒事项'
  reminderForm.id = ''
  reminderForm.assetId = ''
  reminderForm.type = ''
  reminderForm.remindDate = ''
  reminderForm.content = ''
  reminderDialogVisible.value = true
}

const handleReminderSearch = () => {
  console.log('提醒事项搜索条件：', reminderSearchForm)
  ElMessage.success('搜索成功')
}

const resetReminderSearch = () => {
  Object.keys(reminderSearchForm).forEach(key => {
    reminderSearchForm[key] = ''
  })
  ElMessage.success('重置成功')
}

const handleViewReminder = (row) => {
  console.log('查看提醒事项：', row)
  ElMessage.info('查看提醒事项详情')
}

const handleEditReminder = (row) => {
  reminderDialogTitle.value = '编辑提醒事项'
  reminderForm.id = row.id
  reminderForm.assetId = row.assetId
  reminderForm.type = row.type
  reminderForm.remindDate = row.remindDate
  reminderForm.content = row.content
  reminderDialogVisible.value = true
}

const handleDeleteReminder = (row) => {
  ElMessageBox.confirm(
    `确定要删除该提醒事项吗？`,
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.success('删除成功')
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

const submitReminderForm = () => {
  reminderFormRef.value.validate((valid) => {
    if (valid) {
      console.log('提醒事项表单数据：', reminderForm)
      ElMessage.success(reminderForm.id ? '更新成功' : '添加成功')
      reminderDialogVisible.value = false
    }
  })
}

const handleReminderSizeChange = (size) => {
  reminderPagination.pageSize = size
  // 实际应该重新加载数据
}

const handleReminderCurrentChange = (page) => {
  reminderPagination.currentPage = page
  // 实际应该重新加载数据
}

// 财务信息相关方法
const handleFinanceSearch = () => {
  console.log('财务信息搜索条件：', financeSearchForm)
  ElMessage.success('搜索成功')
}

const resetFinanceSearch = () => {
  financeSearchForm.category = ''
  financeSearchForm.dateRange = []
  ElMessage.success('重置成功')
}

const handleViewFinance = (row) => {
  console.log('查看财务信息：', row)
  ElMessage.info('查看财务信息详情')
}

const handleEditFinance = (row) => {
  console.log('编辑财务信息：', row)
  ElMessage.info('编辑财务信息')
}

const handleFinanceSizeChange = (size) => {
  financePagination.pageSize = size
  // 实际应该重新加载数据
}

const handleFinanceCurrentChange = (page) => {
  financePagination.currentPage = page
  // 实际应该重新加载数据
}

// 导入相关方法
const handleImport = () => {
  importDialogVisible.value = true
  importFileList.value = []
}

const handleFileChange = (file, fileList) => {
  importFileList.value = fileList
}

const downloadTemplate = () => {
  ElMessage.success('正在下载导入模板...')
  // 实际应该提供模板下载
}

const submitImport = () => {
  if (importFileList.value.length === 0) {
    ElMessage.warning('请选择要导入的文件')
    return
  }

  ElMessage.success('正在导入财务数据，请稍候...')
  // 实际应该处理文件上传和导入
  setTimeout(() => {
    ElMessage.success('财务数据导入成功')
    importDialogVisible.value = false
    // 实际应该刷新表格数据
  }, 2000)
}
</script>

<style scoped>
.asset-maintenance {
  padding: 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-form {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.import-template {
  margin-top: 10px;
  text-align: center;
}
</style>
